@mixin dis_whole {
    width: 100%;
    height: 100%;
}


/*
 *使用Iconfont，字体文件代替图片文件展示图标
 *Iconfont的体积更小
 *Iconfont是矢量图，拉伸不变形，颜色可自行更换，支持CSS3对字体的修饰效果
 */

@font-face {
    font-family: 'icons-turn-arrow';
    src: url('../fonts/icons/turn-arrow.eot') format('enbedded'), url('../fonts/icons/turn-arrow.woff') format('woff'), url('../fonts/icons/turn-arrow.ttf') format('truetype'), url('../fonts/icons/turn-arrow.svg') format('svg');
}

html,
body,
#app {
    @include dis_whole;
    background-color: #222;
}

.content {
    @include dis_whole;
}


/* stage --start */

.stage {
    position: relative;
    @include dis_whole;
}


/* stage --end */


/* image start */

.img-sec {
    position: relative;
    @include dis_whole;
    perspective: 1800px;
    overflow: hidden;
    background-color: #ddd;
    @at-root {
        .img-figure {
            position: absolute;
            width: 320px;
            margin: 0;
            padding: 40px 40px 0;
            box-sizing: border-box;
            background-color: #fff;
            cursor: pointer;
            transform-origin: 0 0;
            transform-style: preserve-3d;
            transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;
            img {
                width: 240px;
                height: 450px;
            }
            &.is-inverse {
                transform: translate(320px) rotateY(180deg);
            }
        }
        figcaption {
            text-align: center;
            .img-title {
                margin: 20px 0 0 0;
                color: #a7a0a2;
                font-size: 16px;
            }
            .img-back {
                position: absolute;
                top: 0;
                left: 0;
                @include dis_whole;
                padding: 50px 40px;
                overflow: auto;
                color: #a7a0a2;
                font-size: 22px;
                line-height: 1.25;
                text-align: center;
                background-color: #fff;
                box-sizing: border-box;
                /*先开始时.img-back，旋转了180度，因为translateZ(1px)，位于正面图像的下方*/
                /*当.img-figure旋转时，.img-back又旋转了180度，旋转度数为360,因为translateZ(1px)，位于正面图像的上方*/
                transform: rotateY(180deg) translateZ(1px);
            }
        }
    }
}


/* image end */


/* controller start */

.controller-nav {
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 101;
    width: 100%;
    text-align: center;
    @at-root {
        .controller-unit {
            display: inline-block;
            margin: 0 5px;
            width: 30px;
            height: 30px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            background-color: #aaa;
            border-radius: 50%;
            transform: scale(.5);
            transition: transform .6s ease-in-out, background-color .3s;
            &.is-center {
                transform: scale(1);
                background-color: #888;
                &::after {
                    font-family: 'icons-turn-arrow';
                    /* 引用字体文件 */
                    content: '\e600';
                    /* 使用字体文件的Unicode码对字体进行引用 */
                    font-size: 80%;
                    line-height: 30px;
                    /* 设置成和圆点一样的高度，使之垂直居中 */
                    color: #fff;
                    /*
      * 屏幕渲染机制：灰阶渲染（控制边缘亮度，所耗内存相对较低，应用于手机） 亚像素渲染（效果更好，所耗内存相对更高，应用于Mac等）
      * Mac上有些浅色字体图片（在上面设置了白色，可以设置为深色进行测试）在浏览器上显得较粗
      * 解决方案：修改浏览器的属性：
      */
                    -webkit-font-smoothing: antialiased;
                    /* 开启chrome在Mac下字体渲染的灰阶平滑 */
                    -moz-osx-font-smoothing: grayscale;
                    /* 开启firefox在Mac下字体渲染的灰阶平滑 */
                }
                &.is-inverse {
                    background-color: #555;
                    transform: rotateY(180deg);
                }
            }
        }
    }
}


/* controller end */
